<template>
  <div class="map">
    <div id="map" :style="{ width: width + 'px', height: height + 'px' }"></div>
    <!-- <div class="info">
      <el-input
        v-model="input"
        placeholder="输入目的地"
        clearable
        @input="changeInput"
      />
      <div class="map-result" v-if="result.length > 0">
        <template v-for="item in result">
          <div class="item" @click="onMapItem">{{ item.address }}</div>
        </template>
      </div>
    </div> -->
    <div id="r-result"></div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onMounted } from "vue";
interface IMapProps {
  jingwei?: string;
  latitude?: number;
  longitude?: number;
  width?: number;
  height?: number;
  markArr?: any[];
}

const props = withDefaults(defineProps<IMapProps>(), {
  width: 1669,
  height: 935,
  markArr: () => [],
  jingwei: "",
});

const emits = defineEmits([
  "update:longitude",
  "update:latitude",
  "update:jingwei",
]);

const BMap = (window as any).BMap;
let local: any = {};
onMounted(() => {
  let map = new BMap.Map("map");
  if (props.markArr.length === 0 || props.jingwei) {
    map.centerAndZoom("天津市", 15);
  }
  map.enableScrollWheelZoom(true);

  if (props.jingwei) {
    // 创建仓库图标
    let myIcon = new BMap.Icon(
      "/src/assets/img/仓库.png",
      new BMap.Size(50, 50)
    );
    // 创建点标记
    let arr = props.jingwei.split(",");
    let point = new BMap.Point(Number(arr[0]), Number(arr[1]));
    map.centerAndZoom(point, 15);
    let marker = new BMap.Marker(point, {
      icon: myIcon,
    });
    map.addOverlay(marker);
  }

  let marker = "";
  map.addEventListener("click", function (e: any) {
    map.removeOverlay(marker);
    let point = new BMap.Point(e.point.lng, e.point.lat);
    // 创建点标记
    marker = new BMap.Marker(point);
    map.addOverlay(marker);
    console.log(e);
    emits("update:longitude", e.point.lng);
    emits("update:latitude", e.point.lat);
    emits("update:jingwei", e.point.lng + "" + "," + e.point.lat + "");
  });

  for (const item of props.markArr) {
    console.log(props.markArr);
    if (item.jingwei) {
      // 创建仓库图标
      let myIcon = new BMap.Icon(
        "/src/assets/img/仓库.png",
        new BMap.Size(50, 50)
      );
      let arr = item.jingwei.split(",");
      let point = new BMap.Point(Number(arr[0]), Number(arr[1]));
      map.centerAndZoom(point, 15);
      // 创建点标记
      let marker = new BMap.Marker(point, {
        icon: myIcon,
      });
      map.addOverlay(marker);
      // 创建信息窗口
      let opts = {
        width: 200,
        height: 100,
        title: item.name,
      };
      let infoWindow = new BMap.InfoWindow(`地址:${item.mapAdress}`, opts);
      // 点标记添加点击事件
      marker.addEventListener("click", function () {
        map.openInfoWindow(infoWindow, point); // 开启信息窗口
      });
    }
  }

  local = new BMap.LocalSearch(map, {
    renderOptions: {
      map: map,
    },
    onSearchComplete: (res: any) => {
      console.log(res);
    },
  });
});

const input = ref("");
const result = ref<any>([]);
const changeInput = () => {
  local.search(input.value);
};

const onMapItem = (obj: any) => {
  input.value = obj.address;
  local.search(obj.address);
};
</script>

<style lang="less" scoped>
.map {
  position: relative;
}
.info {
  z-index: 999;
  width: auto;
  min-width: 22rem;
  padding: 0.75rem 1.25rem;
  margin-left: 1.25rem;
  position: absolute;
  top: 1rem;
  background-color: #fff;
  border-radius: 0.25rem;
  font-size: 14px;
  color: #666;
  box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
#r-result {
  width: 100%;
}
.map-result {
  .item {
    padding: 5px;
    &:hover {
      background-color: bisque;
    }
  }
}
</style>
